<template>
	<view>
		<view class="app-background"></view>
		<my-navbar :title="childName"></my-navbar>
		<view class="page-line fixed"></view>
		<view class="page-line"></view>
		<view class="statsDetail2">
			<view v-for="(i, j) in list" :key="j" class="statsDetail2-item">
				<view class="item-main">
					<view class="main-point"></view>
					<view>{{ readTime(i.readTime) }} {{ i.childName }}{{ i.relation || '家长' }}查看了通知</view>
				</view>
				<view class="item-line"></view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/common/util';
export default {
	data() {
		return {
			childName: '',
			pageNo: 1,
			pageSize: 15,
			noticeFk: '',
			childId: '',
			pageCount: 0,
			list: []
		};
	},
	methods: {
		// 获取明细列表
		async getList(ifRefresh) {
			if (ifRefresh) {
				this.list = [];
				this.pageCount = 0;
				this.pageNo = 1;
			}
			if (this.pageCount !== 0 && this.pageNo >= this.pageCount + 1) {
				this.$showToast('已加载全部明细列表数据');
				return;
			}
			const page = {
				pageNo: this.pageNo,
				pageSize: this.pageSize
			};
			const data = {
				noticeFk: this.noticeFk,
				childId: this.childId,
				readStatus: 'Y'
			};
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				res1 = await this.$api.notice.get_family_check_list({ page, data });
			} catch (err) {
				uni.hideLoading();
				this.$showToast(err.message || '获取明细列表数据失败');
				return;
			}
			this.pageCount = res1.result.pageCount;
			this.list.push(...res1.result.data);
			uni.hideLoading();
		}
	},
	computed: {
		readTime() {
			return readTime => {
				if (!readTime) return '';
				if (uni.getSystemInfoSync().platform === 'ios') {
					readTime = readTime.replace(/-/g, '/');
				}
				return util.dateFormat('MM-dd hh:mm', new Date(readTime).getTime());
			};
		}
	},
	async onLoad(options) {
		this.childName = options.childName;
		this.noticeFk = options.id;
		this.childId = options.childId;
	},
	async onShow() {
		try {
			await this.getList(true);
		} catch (err) {}
	},
	async onPullDownRefresh() {
		try {
			await this.getList(true);
		} catch (err) {}
		uni.stopPullDownRefresh();
	},
	async onReachBottom() {
		this.pageNo++;
		try {
			await this.getList();
		} catch (err) {}
	}
};
</script>

<style lang="less" scoped>

.page-line {
	height: 20rpx;
	&.fixed {
		width: 750rpx;
		background-color: #f2f4f6;

		position: fixed;
	}
}

.statsDetail2 {
	background-color: #ffffff;
	.statsDetail2-item {
		padding: 0 30rpx;

		.item-main {
			padding: 30rpx 0;

			font-size: 28rpx;
			color: #222222;

			display: flex;
			align-items: center;

			.main-point {
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background-color: #ffb27f;
				margin-right: 30rpx;
			}
		}

		.item-line {
			width: 100%;
			height: 2rpx;
			background-color: #e3e4e6;
		}

		&:last-child {
			.item-line {
				background-color: transparent;
			}
		}
	}
}
</style>
